<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <div v-show="showSearch">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

          <el-form-item :label="$t('common.search')" prop="search">
            <el-input prefix-icon="el-icon-search"
              :placeholder="$joinFormat('/', $t('Shop.name'), $t('Shop.address'), $t('Shop.contactPhone'))" clearable
              v-model="state.queryForm.search" @keyup.enter.native="getDataList" style="width: 350px" />
          </el-form-item>

          <el-form-item :label="$t('Shop.state')" prop="state">
            <el-select v-model="state.queryForm.state" :placeholder="$t('Shop.inputStateTip')" clearable filterable>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in common_state_enable"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.createTime')" prop="rangeTime">
            <el-date-picker v-model="state.queryForm.rangeTime" @change="getDataList" type="daterange" range-separator="~"
              :value-format="$dateTimePattern" :shortcuts="rangeTimeShortcuts"
              :start-placeholder="$t('common.startTime')" :end-placeholder="$t('common.endTime')">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <div class="mb8" style="width: 100%">
          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
            v-auth="'bizs_Shop_add'">
            {{ $t('common.addBtn') }}
          </el-button>
          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'bizs_Shop_del'"
            @click="handleDelete(selectObjs)">
            {{ $t('common.delBtn') }}
          </el-button>
          <right-toolbar v-model:showSearch="showSearch" :export="'bizs_Shop_export'" @exportExcel="exportExcel"
            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
        </div>
      </div>
      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
        @sort-change="sortChangeHandle">
        <el-table-column type="selection" width="40" />
        <!--<el-table-column type="index" label="#" width="40"/>-->

        <el-table-column prop="id" header-align="center" :label="$t('Shop.id')" min-width="200" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.id }}
            <SvgIcon name="ele-CopyDocument" class="icon_copy" @click="copyText(scope.row.id)" />
          </template>
        </el-table-column>
        <!--<el-table-column prop="name" label="名称" sortable="custom" show-overflow-tooltip/>-->

        <el-table-column prop="nickname" header-align="center" min-width="150" show-overflow-tooltip
          :label="$t('Shop.shopInfo')">
          <template #default="scope">
            <card-info-col :icon="scope.row.avatar" :name="scope.row.name" />
          </template>
        </el-table-column>

        <el-table-column prop="state" :label="$t('Shop.state')" show-overflow-tooltip>
          <template #default="scope">
            <dict-tag :options="common_state_enable" :value="scope.row.state"></dict-tag>
          </template>
        </el-table-column>

        <!--<el-table-column-->
        <!--    prop="username"-->
        <!--    header-align="center"-->
        <!--    label="业务员/信息员"-->
        <!--    min-width="150">-->
        <!--  <template #default="scope">-->
        <!--    {{ $joinFormat('/', scope.row.username, scope.row.messenger) }}-->
        <!--  </template>-->
        <!--</el-table-column>-->

        <el-table-column prop="messenger" header-align="center" :label="$t('Shop.contacts')" min-width="115">
          <template #default="scope">
            <div>{{ scope.row.contacts }}</div>
            <div>{{ scope.row.contactPhone }}</div>
            <div>{{ scope.row.otherPhone }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="boss" header-align="center" :label="$t('Shop.boss')" min-width="115">
          <template #default="scope">
            <div>{{ scope.row.boss }}</div>
            <div>{{ scope.row.bossPhone }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="messenger" header-align="center" :label="$t('Shop.legalPerson')" min-width="115">
          <template #default="scope">
            <div>{{ scope.row.legalPerson }}</div>
            <div>{{ scope.row.legalPersonPhone }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="intro" :label="$t('Shop.intro')" min-width="180" show-overflow-tooltip />

        <el-table-column prop="address" :label="$t('Shop.addressInfo')" min-width="200" show-overflow-tooltip>
          <template #default="scope">
            <div class="ellipsis">{{ $joinFormat('/', scope.row.province, scope.row.city, scope.row.area) }}</div>
            <div class="ellipsis">{{ scope.row.address }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="" header-align="center" :label="$t('Shop.prodInfo')" min-width="265">
          <template #default="scope">
            <div>
              {{ $t('Shop.mainProd') }}：
              <div class="box-tag">
                <el-tag v-for="(item, index) in formatProductItems(scope.row.mainProd)" :key="index">
                  {{ item }}
                </el-tag>
              </div>
            </div>
            <div>
              {{ $t('Shop.prodStyle') }}：
              <div class="box-tag">
                <el-tag v-for="(item, index) in formatProductItems(scope.row.prodStyle)" :key="index">
                  {{ item }}
                </el-tag>
              </div>
            </div>
            <div>
              {{ $t('Shop.marketPositioning') }}：
              <div class="box-tag">
                <el-tag v-for="(item, index) in formatProductItems(scope.row.marketPositioning)" :key="index">
                  {{ item }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" min-width="150" :label="$t('common.createInfo')">
          <template #default="scope">
            <div>{{ scope.row.createBy }}</div>
            <div>{{ $dateformat(scope.row.createTime) }}</div>
          </template>
        </el-table-column>

        <el-table-column :label="$t('common.action')" width="150">
          <template #default="scope">
            <el-button icon="edit-pen" text type="primary" v-auth="'bizs_Shop_edit'"
              @click="formDialogRef.openDialog(scope.row.id)">{{ $t('common.editBtn') }}
            </el-button>
            <el-button icon="delete" text type="primary" v-auth="'bizs_Shop_del'" @click="handleDelete([scope.row.id])">
              {{ $t('common.delBtn') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>

    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />

  </div>
</template>

<script setup lang="ts" name="systemShop">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { getPage, delObjs } from "/@/api/bizs/Shop";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useDict } from '/@/hooks/dict';
import CardInfoCol from "/@/components/biz/card-info-col.vue";
import commonFunction from "/@/utils/commonFunction";
import {rangeTimeShortcuts} from "/@/utils/date";

const { copyText } = commonFunction();

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典
const { common_state_enable } = useDict('common_state_enable')

// 定义变量内容
const formDialogRef = ref()
// 搜索变量
const queryRef = ref()
const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getPage
})


//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state)

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}

// 导出excel
const exportExcel = () => {
  downBlobFile('/bizs/shop/export', Object.assign(state.queryForm, { ids: selectObjs }), 'Shop.xlsx')
}

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({ id }) => id);
  multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm('此操作将永久删除');
  } catch {
    return;
  }

  try {
    await delObjs(ids);
    getDataList();
    useMessage().success('删除成功');
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
// 格式化产品信息
const formatProductItems = (list: string) => {
  if (list && list.length > 0) {
    const separate = list.indexOf(',') > -1 ? ',' : '，';
    return list.split(separate)
  }
  return []
}

</script>

<style scoped lang="scss">
.box-tag {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;

  &>div {
    padding: 0 3px;
  }

  &>span {
    margin: 0 3px;
  }
}
</style>
